iT邦幫忙

2025 iThome 鐵人賽

DAY 1
0
佛心分享-IT 人自學之術

30 天體驗:從程式菜鳥到前端新手工程師系列 第 1

5分鐘帶你快速認識網站架構:基本概念及前端架構 (Day1)

  • 分享至 

  • xImage
  •  

想學做網站卻不知道從哪開始?
其實只要先搞懂「前端」和「後端」的差別,再掌握 HTML、CSS、JavaScript 三大基礎,就能入門前端世界!
在了解如何寫網站之前,讓我們先來了解一下「前端」與「後端」是什麼?

✅前端
指網頁或應用程式中,使用者看得到、摸得到的部分,會影響到使用者的感官體驗

✅後端
指負責處理網站或應用程式背後的邏輯、資料和伺服器運作的部分,是使用者看不到但總是在背後默默扛住一切的存在

✅前後端比喻:餐廳外場與內場
以最簡單的比喻來說
前端就像是餐廳的外場,有櫃台、服務生、菜單、餐點,是客人能夠看到並可以互動的部分
在網站中前端包含使用者看的到的所有介面,例如按鈕、主選單、圖片、介面設計、排版等所有視覺元素

後端則像是餐廳的內場,廚房會收到客人的訂單,處理好客人的食物再送到外場
在網站中後端包含管理使用者輸入的數據資料,如整理更新或刪除,並且執行程式需求進行運算

好的!我們現在大致了解前後端的差異
接下來我們先來了解構成一個基本前端網站,會運用到的網頁三大核心技術:HTML、CSS、JS

💠HTML
HyperText Markup Language,超文本標記語言
負責網站的結構,是建構網站時最基本的要素,決定了網站的內容與結構
像蓋一棟房子中的鋼筋骨架結構

💠CSS
Cascading Style Sheets,或譯作「層疊樣式表」、「階層式樣式表」
負責網站的外觀,是用於定義網頁內容的呈現風格和佈局,像是字體、顏色、間距、背景和排版等,讓使用者易於閱讀
像一棟房子的外觀及室內裝潢

💠JS
負責網站中的互動效果,是一種廣泛用於網頁互動和應用程式開發的腳本語言,可實現動態內容更新、動畫、表單處理等功能
就像家中的家具電器,如可以移動的家具、隱藏拉門,使用者做出動作時會有回應反饋,能讓生活更有反應與便利

好的看到這裡你已經認識網站的基本概念及基礎架構了
明天再讓我們更深入的介紹,網頁三大核心技術要如何實際撰寫!
敬請期待下集待續😎
我是Ting,我們明天見!


系列文
30 天體驗:從程式菜鳥到前端新手工程師1
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言